<div class="bk_content_ful">
	<div class="layui-card">
		<div class="layui-tab layui-tab-brief bk_tap" lay-filter="docDemoTabBrief">
			<div class=" bk-side-child" style="width: 276px;">
				<div class="layui-card bk_full has_header left_tree">
					<div class="layui-card-header">
						<div class="tree_top_ss"><input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="关键字"
							 class="layui-input">
							<i class="layui-icon search-icon"></i>
						</div>
						<h1>任免批次列表</h1>
					</div>
					<div class="bk_full">
						<div id="test1" class="demo-tree demo-tree-box"></div>
					</div>
					<!-- 左侧子树 -->
				</div>
				<div class="yincang_on" id="bk_toggle">&nbsp;</div>
			</div>
			<!-- 右边内容区域 -->
			<div class="bk_hastap_right toggle_w" style=" margin-left:270px;">
				<div class="layui-card-header bk_header">
					<h1>任免上会管理>>任免人员</h1>
				</div>
				<div class="bk-card-body">
					
					<form class="layui-form" action="">
						<div class="layui-row bk_search_box">
					
							<div class="layui-col-xs3 search-input " id="status-check" style="width: 26%;">
								<div class="layui-form-item">
									<label class="layui-form-label">状态:</label>
									<div class="layui-input-block">
										<input type="checkbox" name="" title="当前" lay-skin="primary" checked>
										<input type="checkbox" name="" title="历史" lay-skin="primary">
									</div>
								</div>
							</div>
							<div class="layui-col-xs3 search-inputBox" style="width: 31%;">
								<div class="layui-form-item">
									<label class="search-label">任免批次:</label>
									<div class="search-input">
										<input type="text" name="title" required lay-verify="required" placeholder="全部或部分任免批次" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-col-xs3 search-inputBox" style="width: 31%;">
								<div class="layui-form-item">
									<label class="search-label">任免文号:</label>
									<div class="search-input">
										<input type="text" name="title" required lay-verify="required" placeholder="全部或部分任免文号" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
							
							<div class="right_btn">
								<button type="button" class="layui-btn">查询</button>
								<button type="button" class="layui-btn layui-btn-primary resize-button">重置</button></div>
						</div>
					</form>
							
					<div class="">
						<table id="demo_hash" lay-even="" lay-filter="table_data">
						</table>
					 
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container opertion-btnBox">
				 <a href="javascript:;" class="layui-btn layui-btn-xs  operaion-button" lay-event="add">
				  		<i class="layui-icon">&#xe669;</i> <span>刷新</span>
				 </a>
				<a href="javascript:;" class="  layui-btn-xs">
				 		   本次查询人数：<span class="total-color"  >10</span>人
				</a>
                 <div class="form-righttool" style="float: right">
					 <a href="javascript:;" class="layui-btn layui-btn-xs operaion-button" lay-event="descript">
					  		<i class="layui-icon">&#xe610;</i> <span>选人</span>
					 </a>
					 <a href="javascript:;" class="layui-btn layui-btn-xs operaion-button" lay-event="descript">
					  		<i class="layui-icon">&#xe610;</i> <span>完成任免批次</span>
					 </a>
					 <a href="javascript:;" class="layui-btn layui-btn-xs operaion-button" lay-event="descript">
					  		<i class="layui-icon">&#xe610;</i> <span>导出任免材料</span>
					 </a>
                  <a href="javascript:;" class="layui-btn layui-btn-xs operaion-button" lay-event="LAYTABLE_COLS">
                   		<i class="layui-icon">&#xe610;</i> <span>显示设置</span>
                  </a>
				  <a href="javascript:;" class="layui-btn layui-btn-xs operaion-button" lay-event="LAYTABLE_EXPORT">
				   		<i class="layui-icon">&#xe67d;</i> <span>导出</span>
				  </a>
                 </div>
    </div>
 </script>

<script>
	layui.config({
		base: '/src/js/'
	}).use(['jquery', 'mockjs', 'table', 'sidebar', 'form'], function() {
		var $ = layui.jquery,
			layer = layui.layer,
			table = layui.table,
			sidebar = layui.sidebar,
			form = layui.form;
	 form.render()
		//第一个实例

	table.render({
		// size: 'sm',
		id: "input_table",
		limit: 20,
		elem: '#demo_hash',
		toolbar: "#toolbarDemo", //false
		defaultToolbar: [],
		height: 'full-200',
		url: 'views/pages/meeting-manage/meeting-batchPeople/list.json', //数据接口
		page: true, //开启分页
		cols: [
			[{
					checkbox: true,
					fixed: true,
					width: 50,
					align: "center"
				}, {
					field: 'username',
					title: '姓名',
					width: 80,
					sort: true,
					align: "center"
				}, {
					field: 'idcard',
					title: '身份证号',
					width: 220,
					sort: true,
					align: "center"
				}, {
					field: 'birthDate',
					title: '出生年月',
					width: 120,
					sort: true,
					align: "center"
				}, {
					field: 'shsx',
					title: '上会事项',
					width: 120,
					sort: true,
					align: "center"
				}, {
					field: 'gzdwjzw',
					title: '工作单位及职务(全称)',
					width: 200,
					sort: true,
					align: "center"
				}, {
					field: 'rxzsj',
					title: '任现职时间',
					width: 120,
					sort: true,
					align: "center"
				}, {
					field: 'xzj',
					title: '现职级',
					width: 120,
					sort: true,
					align: "center"
				}, {
					field: 'appPosition',
					title: '拟任职级',
					width: 120,
					sort: true,
					align: "center"
				}, {
					field: 'disPosition',
					title: '拟免职务',
					width: 120,
					sort: true,
					align: "center"
				}, {
					field: 'batchState',
					title: '批次状态',
					width: 120,
					sort: true,
					align: "center"
				}
	
			]
		]
	});
	
		//监听事件
		//监听工具条
		table.on('tool(test_hash)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象
			console.log(obj);

			if (layEvent === 'detail') { //查看
				layer.msg(JSON.stringify(obj.data));
				//do somehing
			} else if (layEvent === 'del') { //删除
				layer.confirm('真的删除行么', function(index) {
					obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
					layer.close(index);
					//向服务端发送删除指令
				});
			} else if (layEvent === 'edit') { //编辑
				//do something

				//同步更新缓存对应的值
				obj.update({
					username: '123',
					title: 'xxx'
				});
			}
		});

		$('#search_hash').on('click', function() {
			var that = this;
			// console.log($('#search_tpl_hash').html());
			sidebar.render({
				elem: that,
				content: $('#search_tpl_hash').html(),
				title: '搜索',
				shade: true,
				// shadeClose:false,
				// direction: 'left'
				// dynamicRender: false,
				// url: 'views/member/all/search.html',
				width: '500px', //可以设置百分比和px
				done: function() {
					console.log('ccc');
					form.render();

					//监听提交
					form.on('submit(formDemo_hash)', function(data) {
						// layer.msg(JSON.stringify(data.field));
						table.reload('demo_hash', {
							where: data.field
						});
						return false;
					});
				}
			});
		});
	});
</script>
<script>
	layui.use(['tree', 'util'], function() {
		var tree = layui.tree,
			layer = layui.layer,
			util = layui.util
			//模拟数据
			,
			data1 = [{
					title: '2019年10月第1批',
					id: 1,
					children: []
			
				},
				{
					title: '2019年10月第2批',
					id: 1,
					children: []
			
				}
			]
		//常规用法
		tree.render({
			elem: '#test1' //默认是点击节点可进行收缩
				,
			data: data1
		});



	});
</script>

<script>
	(function() {
		"use strict";
		//左侧树收缩
		var left_pd = $(".bk-side-child").width();
		console.log(left_pd)
		$("#bk_toggle").click(function() {
			if ($(this).hasClass("yincang_on")) {
				$(".bk-side-child").animate({
					width: '7px'
				}, 500);
				$(".left_tree").fadeOut();
				$(".toggle_w").animate({
					marginLeft: '0px'
				});
				//	 $(".xmjg_home_xxk").animate({left:'-=332px'});
				$(this).removeClass("yincang_on");
				$(this).addClass("yincang_off");
				$(this).animate({
					right: '7px'
				}, 500);
			} else {
				$(".bk-side-child").animate({
					width: left_pd
				}, 500);
				$(".toggle_w").animate({
					marginLeft: left_pd-10
				});
				$(".left_tree").fadeIn();
				//	$(".xmjg_home_xxk").animate({left:'+=332px'});
				$(this).removeClass("yincang_off");
				$(this).addClass("yincang_on");
				$(this).animate({
					right: '1px'
				}, 500);
			}
		});
	})(jQuery);
</script>
<style scoped>
	#status-check .layui-form-label{
		width: auto;
		 display: inline-block;
	}
	#status-check .layui-input-block{ 
		margin-left: 0;
		 }
	#status-check	.layui-form-checkbox span{
		padding:0 3px
	}
</style>
